<template>
	<view class="tab-shortcut">
		<view class="thead uv-flex-row">
			<view class="item">功能</view>
			<view class="item">快捷键</view>
			<view class="item range">使用课程</view>
			<view class="item">操作</view>
		</view>
		<view class="tbody">
			<view class="row uv-flex-row" v-for="(item,index) in list" :key="index">
				<view class="item">{{item.name}}</view>
				<view class="item">{{item.value}}</view>
				<view class="item range">{{range(item)}}</view>
				<view class="item">不可更改</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { computed } from 'vue';
	const list = computed(() => {
		return getApp().globalData.setting?.SHORTCUT_KEY;
	})
	const range = computed((item) => {
		return item => {
			switch (item.key) {
				case 'READ':
					return '英语单词课程';
				case 'ADD_ERROR':
					return '英语单词课程';
				default:
					return '所有课程';
			}
		}
	})
</script>
<style scoped lang="scss">
	.thead {
		height: 36px;
		line-height: 36px;
		background: rgba(56, 56, 69, .5);
		.item {
			width: 25%;
			padding: 0 30px;
			font-size: 16px;
			color: #BABAD8;
			&.range {
				padding: 0 20px;
			}
		}
	}
	.tbody {
		.row {
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 2px;
				opacity: 0.5;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #545477 8.19%, #545477 89.45%, rgba(255, 255, 255, 0.00) 100%);
			}
			&:last-child {
				&::after {
					display: none;
				}
			}
		}
		.item {
			width: 25%;
			height: 66px;
			line-height: 66px;
			padding: 0 30px;
			font-size: 16px;
			color: #BABAD8;
			&.range {
				padding: 0 20px;
			}
		}
	}
</style>